<template>
  <div class="dashboard-container">
    <!--第一横栏开始-->
    <el-row class="row1" type="flex" justify="left">
      <el-col :span="4">
        <p style="font-size: larger">所有项目({{ proNumber }})</p>
      </el-col>
      <el-col :offset="15"  :span="7" style="margin-top: 15px">
        <span><el-button @click="joinPro" type="danger">加入项目</el-button></span>
        <span style="margin-left: calc(10% - 15px);"><el-button @click="createPro" class="proButton">新建项目</el-button></span>
      </el-col>
    </el-row>
    <!--第一横栏结束-->
    <el-divider></el-divider>
    <!--第二横栏开始-->
    <el-row>
      <el-col :span="4">
        <el-select v-model="value" placeholder="所有状态" @change="selectChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"

          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :offset="16" :span="2" style="margin-top: 15px;">
        <el-checkbox v-model="checked" @change="checkChange">只显示自己的项目</el-checkbox>
      </el-col>
    </el-row>
    <!--第二横栏结束-->
    <el-divider></el-divider>
    <!--第三横栏开始（主栏）-->
    <protable ref="filterData"></protable>
    <!--  弹出框 显示项目详情的  -->
    <el-drawer
      title="项目详情"
      size='50%'
      :modal="false"
      :modal-append-to-body="false"
      ref="proInformationData"
      :destroy-on-close="true"
      :visible.sync="drawerProInformation">
      <proInformation v-bind:projectInfo="projectInfo"></proInformation>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import protable from './protable/index'
import ProInformation from '@/views/dashboard/proInformation/index'
import { joinProject } from '@/api/project'

export default {
  name: 'Dashboard',
  components:{
    ProInformation,
    protable:protable,
  },
  data(){
    return{
      proNumber: '2',                //项目的数量
      checked: false,
      drawerProInformation: false,   //控制项目详情抽屉的变量
      options: [{                    //多选框的选项
        value: '所有状态',
        label: '所有状态'
      }, {
        value: '进行中',
        label: '进行中'
      }, {
        value: '结项中',
        label: '结项中'
      }, {
        value: '已结项',
        label: '已结项'
      }, {
        value: '代审核',
        label: '代审核'
      }],
      value: '',                   //多选框显示的字
      projectInfo: {}              //绑定给项目详情组件的变量
    }
  },
  computed: {
    ...mapGetters(['name','userInfo']),
  },
  mounted() {
    this.$store.dispatch("app/openSider");
  },
  methods:{
    //select选择器选择时触发的方法
    selectChange(label){
      this.$refs.filterData.selectFilterData(label);
    },
    //单选框发生变化时调用的方法
    checkChange(value){
      this.$refs.filterData.checkFilterData(value);
    },
    //加入项目按钮调用方法
    joinPro(){
      this.$prompt('请输入项目邀请码：', '加入项目', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        inputErrorMessage: '邀请码格式不正确'
      }).then(({ value }) => {
        //输入点击确定
        let params = {}
        this.$set(params,'userId',this.userInfo.id)
        this.$set(params,'userInvitCode',value)
        joinProject(params).then(res => {
          if (!(res.data === 400))
            this.$router.go(0)
          this.$message({type:'success',message:res.msg})
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    //点击新建项目的调用方法
    createPro(){
      this.$router.push('/createPro')
    },
    //点击表格查看右抽屉调用方法，由子组件protable调用
    drawerProInformationChange(row){
      this.projectInfo = row
      this.drawerProInformation = true
    }
  },
}
</script>

<style lang="scss" scoped>

.row1{
  min-width: 1008px;
}
</style>
